<template>
  <div>
    <el-row>
      <el-col>
        <el-form :model="transInfo" label-width="110px" class="licc-trans-info-el-form">
          <el-form-item label="交易编号">{{transInfo.transactionSn}}</el-form-item>
          <el-form-item label="订单编号：">{{transInfo.orderSn}}</el-form-item>
          <el-form-item label="金额：">{{transInfo.amount}}</el-form-item>
          <el-form-item label="状态：">{{transInfo.type}}</el-form-item>
          <el-form-item label="交易人手机号：">{{transInfo.phone}}</el-form-item>
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in orderActivities"
              :key="index"
              :color="activity.color"
              :timestamp="activity.timestamp">
              {{activity.content}}
            </el-timeline-item>
          </el-timeline>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    name: 'GoodsInfo',
    props: ['message'],
    data() {
      return {
        transInfo:{},
        orderActivities:[],
      }
    },
    created(){
      this.initPage();
    },
    methods: {
      initPage() {
        this.transInfo = this.message;
        this.transShowRule(this.transInfo);
      },
      transShowRule(transInfo) {
        this.orderActivities.push({content: '支付时间', color: '#67C23A', timestamp: transInfo.payTime});
        if (transInfo.type == 2) {
          this.orderActivities.push({content: '申请退款时间', color: '#E6A23C', timestamp: transInfo.applayReturnTime});
        }
        if (transInfo.type == 3) {
          this.orderActivities.push({content: '申请退款时间', color: '#E6A23C', timestamp: transInfo.applayReturnTime});
          this.orderActivities.push({content: '退款时间', color: '#F56C6C', timestamp: transInfo.returnTime});
        }
      }
    }
  }
</script>
<style>
  .licc-trans-info-el-form>.el-form-item{
    margin-bottom: 10px;
  }
</style>
